@extends('layout.master')
@section('content')
    <div class="right_col" role="main">
        <div class="">
            {{-- <div class="page-title">
                <div class="title_left">
                    <h3>Staff <small>List</small></h3>
                </div>
            </div> --}}

            <div class="clearfix"></div>

            <div class="row" style="display: block;">
                <div class="col-md-4 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Role<small>Edit</small></h2>

                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            @session('success')
                                <div class="alert alert-success alert-dismissible " role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
                                    </button>
                                    <strong>Success!</strong> {{$value}}
                                </div>
                            @endsession
                            <form id="demo-form" action="{{route('admin.roles.update', $role->id)}}" data-parsley-validate method="POST">
                                @csrf
                                <label for="fullname">Name * :</label>
                                <input type="text" id="fullname" class="form-control @error('name') is-invalid @enderror" name="name" value="{{$role->name}}" required />
                                @error('name')
                                    <label class="text-danger">{{ $message }}</label>
                                @enderror
                                <br />
                                <button type="submit" class="btn btn-primary"><span >Submit</span></button>

                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-md-8 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Roles<small>List</small></h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card-box table-responsive">
                                        <table class="table table-striped jambo_table bulk_action role-table">
                                            <thead>
                                            <tr class="headings">
                                                <th class="column-title">Role </th>
                                                <th class="column-title">Type </th>
                                                <th class="column-title no-link last text-right"><span class="nobr">Action</span>
                                                </th>
                                            </tr>
                                            </thead>

                                            <tbody>
                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')

<script>
        $(document).ready(function(){
            var table = $('.role-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.roles.index') }}",
                columns: [
                    {data: 'name', name: 'name'},
                    {data: 'guard_name', name: 'guard_name'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},

                ],
                columnDefs: [
                    { width: "40%", targets: 0 }, // Role column
                    { width: "40%", targets: 1 }, // Type column
                    { width: "20%", targets: 2, className: "text-right" }, // Action column
                ]

            });

            $(document).on('click', '.delete', function(){
                var url = $(this).data('url');
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                        method: 'DELETE',
                        url: url,
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if(response.status){
                                Swal.fire({
                                    title: "Deleted!",
                                    text: response.message,
                                    icon: "success"
                                });
                                $('.role-table').DataTable().ajax.reload();
                            }else{
                                Swal.fire({
                                    title: "Error",
                                    text: response.message,
                                    icon: "error"
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            console.log(xhr.responseText);
                            Swal.fire({
                                    title: "Error",
                                    text: "An error occurred. Please try again later.",
                                    icon: "error"
                                });
                        }
                    });
                    }
                });
            });
        });
    </script>
@endpush